<template>
  <FrostedGlass class="content">
    <img
      class="header"
      :src="
        type == 'info'
          ? '/img/img_tt_blue.png'
          : type == 'error'
          ? '/img/img_tt_red.png'
          : type == 'success'
          ? '/img/img_tt_green.png'
          : type == 'warning'
          ? '/img/img_tt_yellow.png'
          : '/img/img_tt_blue.png'
      "
    />
    <div class="body">
      <div v-show="tabs.length > 1" class="tabs">
        <template v-for="(item, index) in tabs" :key="index">
          <span v-if="index !== 0"> | </span>
          <strong class="label" :class="{active: index === active}" @click="handleClick(item, index)">
            {{ item.label }}
          </strong>
        </template>
      </div>
      <div v-show="active == 0" class="inner">
        <div class="title">
          <img class="cover-img" src="/img/community.png" />
          <div class="label">
            <strong>凤池新村</strong><br />
            <span>福马路321号</span>
          </div>
        </div>
        <div class="detail">
          <div class="col">
            <span>今日供水：122kt m³</span><br />
            <span>今日药耗：119.2kg</span><br />
            <span>吨水电耗：355kW.h/(kt/MPa)</span><br />
            <span>出水压力：0.23MPa</span><br />
            <span>出水浊度：0.05NTU</span><br />
            <span>出水PH：7.78</span>
          </div>
          <div class="col">
            <span>今日电耗：36478.9kW.h</span><br />
            <span>进水量：12356.3m³</span><br />
            <span>吨水药耗：1.5kg/Kt</span><br />
            <span>出水流量：876m³</span><br />
            <span>出水余氯：0.76mg/L</span><br />
            <span>上报时间：2021/6/21 15:21:22</span>
          </div>
        </div>
      </div>
      <div v-show="active == 1">
        <table class="table">
          <thead>
            <tr>
              <th
                v-for="(item, index) in tableOption.head"
                :key="index"
                class="th"
                style="height: 30px"
                :style="{'min-width': item.width}"
              >
                {{ item.label }}
              </th>
            </tr>
          </thead>
          <tbody>
            <tr
              v-for="(row, index) in tableOption.body"
              :key="index"
              :style="{background: index % 2 == 0 ? 'rgba(106, 112, 118, 0.4)' : 'transparent'}"
            >
              <td v-for="(_item, _index) in tableOption.head" :key="_index" class="td" style="height: 30px">
                {{ row[_item.key] }}
              </td>
            </tr>
          </tbody>
        </table>
      </div>
      <div v-show="active == 2" class="inner">
        <div class="video">
          <div class="left">
            <img style="width: 100%; height: 100%" src="/img/community.png" />
          </div>
          <div class="right">
            <div class="video-btn"></div>
            <strong class="title">基础信息</strong>
            <span>IP地址：192.168.12.11</span><br />
            <span>设备类型：枪机</span><br />
            <span>设备品牌：海康</span>
          </div>
        </div>
      </div>
      <div v-show="active == 3" class="inner">
        <div>
          <strong class="warning-label" style="float: right; color: #ffca5a">处理中</strong>
          <strong class="warning-label">管线：CX-101</strong><br />
          <strong class="warning-label" style="color: #ff5a5a">异常：爆管</strong>
        </div>
        <div style="padding-top: 16px">
          <span>小王 上传视频 2021/6/21 15:21:22</span><br />
          <span>管理员 指派问题给小王 2021/6/21 15:21:22</span><br />
          <span>系统 发现隐患 2021/6/21 15:21:22</span>
        </div>
      </div>
      <div v-show="active == 4" class="inner">
        <img style="width: 100%; height: calc(100% - 5px); padding: 0" src="/img/img_news.png" />
      </div>
    </div>
  </FrostedGlass>
</template>

<script setup>
  import {ref, watch} from 'vue'
  import FrostedGlass from '@/components/FrostedGlass/index.vue'

  let type = ref('info')
  let active = ref(0)
  const tabs = [
    {label: '基础信息', type: 'success'},
    {label: '历史信息', type: 'warning'},
    {label: '视频监控', type: 'info'},
    {label: '异常信息', type: 'error'},
    {label: '塌陷视频', type: 'error'},
  ]
  const tableOption = {
    head: [
      {label: '序号', key: 'index'},
      {label: 'ph值', key: 'ph', width: '60px'},
      {label: '电导率', key: 'electric', width: '60px'},
      {label: '氨氮', key: 'ammonia', width: '90px'},
      {label: '浊度', key: 'turbidity', width: '60px'},
      {label: '时间', key: 'time', width: '120px'},
    ],
    body: [
      {index: '1', ph: '7.33', electric: '342', ammonia: '0.55mg/L', turbidity: '12', time: '2021/6/21 15:21:22'},
      {index: '2', ph: '7.33', electric: '342', ammonia: '0.55mg/L', turbidity: '12', time: '2021/6/21 15:21:22'},
      {index: '3', ph: '7.33', electric: '342', ammonia: '0.55mg/L', turbidity: '12', time: '2021/6/21 15:21:22'},
      {index: '4', ph: '7.33', electric: '342', ammonia: '0.55mg/L', turbidity: '12', time: '2021/6/21 15:21:22'},
      {index: '5', ph: '7.33', electric: '342', ammonia: '0.55mg/L', turbidity: '12', time: '2021/6/21 15:21:22'},
    ],
  }
  watch(active, index => (type.value = tabs[index].type), {immediate: true})
  function handleClick(item, index) {
    active.value = index
    type.value = item.type
  }
</script>

<style lang="scss" scoped>
  ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }

  ::-webkit-scrollbar-thumb {
    background-color: #d0d0d099;
    border-radius: 8px;
  }

  ::-webkit-scrollbar-track {
    background-color: #191e2366;
    border-radius: 8px;
  }
  .content {
    background-color: rgba(25, 30, 35, 0.55);
    position: relative;
    width: 500px;
    height: 350px;
    overflow: hidden;
    color: #fff;
    .header {
      width: 100%;
      height: 16px;
    }
    .body {
      margin: 16px;
      height: calc(100% - 48px);
      .tabs {
        width: auto;
        height: 40px;
        line-height: 40px;
        background: #191e2366;
        border-radius: 8px 8px 0 0;
        padding: 0 16px;
        color: #d0d0d099;
        .label {
          cursor: pointer;
        }
        .label:hover {
          color: #fff;
        }
        .active {
          color: #fff;
        }
      }
      .inner {
        line-height: 20px;
        height: calc(100% - 80px);
        border: 1px solid #d0d0d099;
        border-radius: 0 0 8px 8px;
        padding: 16px;
        overflow: auto;
        .title {
          display: flex;
          .cover-img {
            float: left;
            width: 120px;
            height: 75px;
          }
          .label {
            height: 35px;
            line-height: 35px;
            margin-left: 16px;
          }
        }
        .detail {
          margin-top: 16px;
          .col {
            display: inline-block;
            width: 50%;
            vertical-align: top;
          }
        }
        .warning-label {
          height: 32px;
          line-height: 32px;
          font-size: 16px;
        }
        .video {
          .left {
            display: inline-block;
            width: 65%;
            vertical-align: top;
          }
          .right {
            display: inline-block;
            vertical-align: top;
            margin-left: 16px;
            width: calc(35% - 16px);
            .video-btn {
              margin: 0 20px;
              width: 100px;
              height: 100px;
              background-repeat: no-repeat;
              background-image: url('/img/icon_videobtn.png');
              background-size: 100% 100%;
            }
            .title {
              height: 36px;
              line-height: 36px;
            }
          }
        }
      }
      .table {
        width: 100%;
        border-collapse: collapse;
        .th {
          width: 50%;
          border: 1px solid rgba(208, 208, 208, 0.3);
          color: #acd8f9;
          text-align: center;
        }
        .td {
          border: 1px solid rgba(208, 208, 208, 0.3);
          text-align: center;
          .din-font {
            font-family: D-DINCondensed-Bold, D-DINCondensed;
            font-size: 3.4vh;
            color: #88ebff;
          }
        }
      }
    }
  }
</style>
